<!-- 仓库管理 -->
<template>
  <div class="container-ymm">
    <div class="header-ymm">
      <el-input
        v-model="listQuery.keyWord"
        type="text"
        class="seach-input"
        size="small"
        placeholder="输入编码和名称查询"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"/>
      </el-input>
      <el-select v-model="listQuery.deleteFlag" class="seach-select" size="small">
        <el-option
          v-for="item in listQuery.status_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button class="greenbt" size="small" @click="getList()">查询</el-button>
      <el-button v-show="checkPermission('warehouse:add:juri')" class="greenbt" size="small" @click="addFun()">新增</el-button>
    </div>
    <div class="table-ymm">
      <el-table v-loading="isloading" :data="tableData" style="width: 100%" border>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-show="checkPermission('warehouse:update:juri')" type="text" @click="edcitFun(scope.row)">编辑</el-button>
            <el-button
              v-if="scope.row.deleteFlag === 'Y'"
              v-show="checkPermission('warehouse:abled:juri')"
              type="text"
              @click="setStatus(scope.row.deleteFlag, scope.row.warehouseId)"
            >启用</el-button>
            <el-button
              v-else-if="scope.row.deleteFlag === 'N'"
              v-show="checkPermission('warehouse:enabled:juri')"
              type="text"
              @click="setStatus(scope.row.deleteFlag, scope.row.warehouseId)"
            >停用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="仓库编码">
          <template slot-scope="scope">
            <span>{{ scope.row.warehouseCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库名称">
          <template slot-scope="scope">
            <span>{{ scope.row.warehouseName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.deleteFlag=='N'" style="color:#28A087">正常</span>
            <span v-else-if="scope.row.deleteFlag=='Y'" style="color:#F05050">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库人员">
          <template slot-scope="scope">
            <span>{{ scope.row.warehouseLinkman }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库人员电话">
          <template slot-scope="scope">
            <span>{{ scope.row.warehousePhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库地址">
          <template slot-scope="scope">
            <span>{{ scope.row.warehouseAddress }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库面积">
          <template slot-scope="scope">
            <span>{{ scope.row.warehouseAcreage }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-ymm-bt">
      <!-- :pager-count="table.page_count" -->
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="listQuery.count"
        :total="total"
        background
        layout="sizes, prev, pager, next,total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <component :is="modal" :modal-data="modalData" :modal-static-data="{closeChildAndRefresh}" @close="closeChild"/>
  </div>
</template>
<script>
import Add from './dialog/Add.vue'
import {
  queryAllWarehouse,
  deleteStoreByWarehouseId
} from '@/api/pas/warehouse'
import { getUserInfo } from '@/api/login'
export default {
  data() {
    return {
      userid: null,
      modal: null,
      modalData: {},
      listQuery: {
        offset: null,
        page: 1,
        count: 10,
        keyWord: '',
        deleteFlag: '',
        status_options: [
          {
            label: '全部状态',
            value: ''
          },
          {
            label: '停用',
            value: 'Y'
          },
          {
            label: '正常',
            value: 'N'
          }
        ]
      },
      isloading: true,
      tableData: [],
      total: 1
    }
  },
  created() { this.getPermission() },
  mounted() {
    console.warn('挂载完毕')
    this.getList()
  },
  methods: {
    closeChildAndRefresh() {
      this.modal = null
      this.listQuery.page = 1
      this.getList()
    },
    // 分页
    handleCurrentChange(val) {
      console.warn(val)
      this.listQuery.page = val
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.count = val
      this.getList()
    },
    closeChild() {
      this.modal = null
    },
    addFun() {
      this.modalData = { type: 'creat' }
      this.modal = Add
    },
    edcitFun(data) {
      this.modalData = { type: 'edict', data: data }
      this.modal = Add
    },
    /**
     * 分页查询
     */
    getList() {
      this.listQuery.offset = (this.listQuery.page - 1) * this.listQuery.count
      queryAllWarehouse(this.listQuery).then(res => {
        console.warn(res)
        if (res.data.data) {
          this.tableData = res.data.data.list
          this.total = res.data.data.count
          this.isloading = false
        }
      })
    },
    /**
     * 停用,启用仓库
     */
    setStatus(deleteFlag, warehouseId) {
      const formData = new FormData()
      formData.append('deleteFlag', deleteFlag)
      formData.append('warehouseId', warehouseId)
      deleteStoreByWarehouseId(formData)
        .then(res => {
          if (res.data.status === 'faild') {
            this.$message.error(res.data.messge)
          } else {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }
        }).finally(() => {
          this.listQuery.page = 1
          this.getList()
        })
    },

    // 权限
    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'token') {
          this.userid = arr2[1]
        } else {
          this.userid = 1
        }
      }
      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo().then(response => {
        if (response.data.status === 'ok') {
          localStorage.setItem(this.userid, JSON.stringify(response.data.data.permissions))
        }
      }).catch(error => {
        console.log(error)
      })
    },

    checkPermission(value) {
      if (value) {
        if (localStorage.getItem(this.userid) && localStorage.getItem(this.userid).indexOf(value) >= 0) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    }

  }
}
</script>

